<template>
  <div>
    <h2>深入v-model</h2>
    <input type="text" v-model="msg" />
    <span>{{ msg }}</span>
    <br/><br/>
    <h2>v-model底层实现原理</h2>
    <input type="text" :value="msg1" @input="handle1" />
    <span>{{ msg1 }}</span>
    <br/><br/>
    <!-- <CustomInput :value="msg2" @input="handle2"></CustomInput> -->
    <CustomInput v-model="msg2"></CustomInput>
    <br/><br/>
    <h2>elementui组件</h2>
    <el-input size="mini" v-model="msg3"></el-input>
    <span>{{ msg3 }}</span>
  </div>
</template>

<script type="text/ecmascript-6">
import CustomInput from './CustomInput.vue'
export default {
  name: 'ModelTest',
  components: {
    CustomInput
  },
  data() {
    return {
      msg:"我是豪哥",
      msg1: "v-model底层实现原理",
      msg2: "父组件",
      msg3: "element-ui",
    }
  },
  methods: {
    handle1(event){
      this.msg1 = event.target.value;
    },
    handle2(parmas){
      this.msg2 = parmas;
    },
  },
}
</script>
